<template>
  <div class="appointment-container">
    <div class="appointment-header">
      <h1 class="appointment-title">立即预约</h1>
      <div class="title-decoration"></div>
    </div>

    <el-card class="appointment-card">
      <el-form
          :model="appointmentForm"
          :rules="rules"
          ref="formRef"
          label-position="right"
          label-width="100px"
          class="appointment-form"
      >
        <el-form-item label="患者 ID" prop="patientId">
          <el-input
              v-model.number="appointmentForm.patientId"
              autocomplete="off"
              placeholder="请输入患者 ID"
              disabled
              class="custom-disabled"
          >
            <template #prefix>
              <el-icon><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="预约日期" prop="date">
          <el-date-picker
              v-model="appointmentForm.date"
              type="date"
              placeholder="选择预约日期"
              value-format=""
              class="full-width-datepicker"
              :popper-class="'custom-datepicker'"
          >
            <template #prefix>
              <el-icon><Calendar /></el-icon>
            </template>
          </el-date-picker>
        </el-form-item>

        <el-form-item class="submit-item">
          <el-button
              type="primary"
              @click="submitAppointment"
              class="submit-btn"
              :icon="Promotion"
          >
            提交预约
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { User, Calendar, Promotion } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';
import { mapGetters } from 'vuex';

export default {
  components: {
    User,
    Calendar,
    Promotion
  },
  computed: {
    ...mapGetters(['getUserId']) // 假设 Vuex 中存储的是
  },
  data() {
    return {
      appointmentForm: {
        patientId: null,
        escortId: null,
        date: null
      },
      rules: {
        patientId: [
          { required: true, message: '请等待患者 ID 加载', trigger: 'blur' },
          { type: 'number', message: '患者 ID 必须为数字值', trigger: 'blur' }
        ],
        date: [
          { required: true, message: '请选择预约日期', trigger: 'change' }
        ]
      }
    };
  },
  created() {
    // 在组件创建时获取患者 ID
    this.getPatientId();
  },
  methods: {
    async getPatientId() {
      const UserId = this.getUserId;
      try {
        const res = await axios.get(`/api/wu_vue_2_test/Patient/getByUserId?UserId=${UserId}`);
        if (res.data.code === 200) {
          this.appointmentForm.patientId = res.data.data.patientId;
        } else {
          ElMessage.error(res.data.message);
        }
      } catch (error) {
        console.error('获取患者 ID 失败:', error);
        ElMessage.error('获取患者 ID 失败，请稍后重试');
      }
    },
    async submitAppointment() {
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          try {
            const res = await axios.post('/api/wu_vue_2_test/Appointment/add', this.appointmentForm);
            if (res.data.code === 200) {
              ElMessage.success('预约成功');
              this.appointmentForm = {
                patientId: this.appointmentForm.patientId, // 保留患者 ID
                escortId: null,
                date: null
              };
            } else {
              ElMessage.error(res.data.message);
            }
          } catch (error) {
            console.error('预约失败:', error);
            ElMessage.error('预约失败，请稍后重试');
          }
        } else {
          console.log('表单验证不通过');
          return false;
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
.appointment-container {
  padding: 30px;
  margin: 0;
  min-height: calc(100vh - 60px);
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

  .appointment-header {
    text-align: center;
    margin-bottom: 40px;

    .appointment-title {
      font-size: 28px;
      color: #2c3e50;
      margin-bottom: 10px;
      position: relative;
      display: inline-block;

      &::after {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: #409eff;
        border-radius: 2px;
      }
    }
  }

  .appointment-card {
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;

    &:hover {
      transform: translateY(-3px);
    }

    :deep(.el-card__body) {
      padding: 30px;
    }
  }

  .appointment-form {
    .el-form-item {
      margin-bottom: 28px;
    }

    .custom-disabled {
      :deep(.el-input__inner) {
        background-color: #f8f9fa;
        color: #6c757d;
        cursor: not-allowed;
      }
    }

    .full-width-datepicker {
      width: 100%;
    }

    .submit-item {
      margin-top: 40px;
      text-align: center;

      .submit-btn {
        width: 200px;
        height: 44px;
        font-size: 16px;
        letter-spacing: 1px;
        transition: all 0.3s ease;
        background: linear-gradient(45deg, #409eff, #79bbff);
        border: none;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 5px 15px rgba(64, 158, 255, 0.4);
        }
      }
    }
  }
}

// 自定义日期选择器样式
:global(.custom-datepicker) {
  .el-picker-panel__content {
    .el-date-table-cell {
      &.current:not(.disabled) .el-date-table-cell__text {
        background: #409eff;
        color: white;
      }

      &:hover .el-date-table-cell__text {
        background: #79bbff;
        color: white;
      }
    }
  }
}
</style>